<template>
	<view class="main">
		<u-navbar class="topBar" :placeholder="true" :autoBack="true" fixed>
			<view class="u-nav-slot" slot="right">
				<u-search class="search" :placeholder="hotPlaceholderStr" prefixIcon="search" v-model="keyword"
					@search="clickSearch(keyword)" confirm-type="search" :show-action="false" :focus="isInputFocus">
				</u-search>
			</view>
			<view class="u-nav-slot" slot="right">
				<span style="color: #666666;" @click="clickSearch(keyword)">搜索</span>
			</view>
		</u-navbar>

		<view class="searchTips" v-if="!isSearch">
			<view class="historyTips" v-if="historyList.length > 0">
				<view class="title">历史搜索</view>
				<image class="historyDelete" src="/static/img/library/problem/ic_delete.png" @click="deleteHistorySearch()">
				</image>
			</view>

			<view v-if="historyList.length > 0">
				<view class="type_item" v-for="(it, idx) in historyList" @click="search(it)" :key="idx">
					{{ it }}
				</view>
			</view>
			<view v-if="hotSearchList.length > 0">
				<view class="title" style="margin-top: 30rpx;">热门搜索</view>
				<view class="type_item" v-for="(item, index) in hotSearchList" @click="search(item.content)" :key="index">
					<view>
						<image src="/static/img/library/problem/hotIcon.png" class="hotIcon"></image>
						{{ item.content }}
					</view>
				</view>
			</view>
		</view>


		<!-- 搜索结果 -->
		<view v-if="dataList.length > 0 && isSearch" class="search_list">
			<scroll-view style="height: calc(100vh - 100rpx)" class="scroll" scroll-y="true" refresher-enabled="true"
				:refresher-triggered="isRefreshing" @refresherrefresh="reload" @scrolltolower="loadMore"
				refresher-background="#F7F7F7">
				<view class="search_count">
					为您找到
					<text class="total">{{ total }}</text>条信息
				</view>
				<view class="li" v-for="(item, index) in dataList" :key="index" @click="toInfo(item)">
					<mp-html :tag-style="tagStyle"
						container-style="font-size: 32rpx;color: #000;line-height: 45rpx;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;"
						:content="hightLightText(item.title, keyword)">
					</mp-html>
					<view class="li_content flex_between ellipsis2" v-html="item.answer_content"></view>
					<view class="time">{{ parseTimeDot(item.createtime, '{y}-{m}-{d}') }}</view>
				</view>
			</scroll-view>
		</view>
		<view class="empty" v-if="dataList.length == 0 && isSearch && !isLoading">
			<view class="search_count">
				为您找到
				<text class="total">{{ total }}</text>条信息
			</view>
			<u-empty marginTop="100" text="未搜索到相关内容" mode="search"
				icon="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"></u-empty>
		</view>


	</view>
</template>

<script  type="text/javascript" src="plus-confusion://../library/problem/search/index"></script>

<style lang="scss">
.main {
	margin: 0;
	padding: 0;

	.topBar {
		.search {
			position: relative;
			right: 20rpx;
			width: 542rpx;
			height: 100%;
			background: #F3F3F3;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			border: transparent;
		}
	}


	.searchTips {
		margin-top: 20rpx;
		flex-shrink: 0;
		padding: 0 30rpx;

		.historyTips {
			width: 100%;
			height: 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.historyDelete {
				width: 50rpx;
				height: 50rpx;
				padding: 10rpx;
				margin-right: 30rpx;
			}
		}

		.title {
			font-size: 30rpx;
			font-weight: 700;
			color: #333333;
		}

		.type_item {
			display: inline-block;
			margin: 24rpx 20rpx 0 0;
			padding: 0 30rpx;
			min-height: 56rpx;
			line-height: 56rpx;
			background: #F8F9FA;
			border-radius: 28rpx;
			font-size: 22rpx;
			color: #666666;
		}

		.hotIcon {
			width: 30rpx;
			height: 30rpx;
		}
	}



	/deep/.scroll {
		width: 100vw;
		background: #F7F7F7;
		box-sizing: border-box;
		padding: 0rpx 30rpx 0 30rpx;
	}

	.search_list {
		height: 100%;
		padding-bottom: 40rpx;
		background: #F7F7F7;

		.search_count {
			padding-top: 20rpx;
			font-size: 24rpx;
			color: #9E9E9E;
			line-height: 28rpx;

			.total {
				color: #1C87F3;
				font-size: 28rpx;
			}
		}


		.li {
			width: 690rpx;
			position: relative;
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			background: #FFFFFF;
			box-shadow: 0 6rpx 17rpx 3prx rgba(0, 0, 0, 0.0200);
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between
		}

		.li_content {
			font-size: 24rpx;
			color: #999999;
			line-height: 21px;
			margin-top: 30rpx;
		}

		.time {
			color: #999999;
			font-size: 26rpx;
			display: flex;
			justify-content: flex-end;
			margin-top: 10rpx;
		}
	}


	.empty {
		padding: 30rpx;

		.search_count {
			font-size: 24rpx;
			color: #9E9E9E;
			line-height: 28rpx;

			.total {
				color: #1C87F3;
				font-size: 28rpx;
			}
		}
	}
}
</style>
